<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>非单文件的组件</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        <School></School>
    </div>

    <script>
        Vue.config.productionTip = false // 关闭生产提示

        /* 
            定义一个Scholl组件.
                1.如何定义一个组件:使用 Vue.extend(options) 去创建
                2.School的本质是一个构造函数.
                以后我们写一个<School>标签 Vue帮我们去new
                3.options是配置对象.几乎和new Vue()时的options一样
                    区别:
                    (1).不能写el去指定容器 所有组件最终要被一个vm所管理 vm中会指定好一个el
                    vm实例上有个属性: $children 是数组,里面存放的就是vue所管理的一个一个组件实例.

                    (2).data必须写成函数(不能写成对象)
                        为了确保多个组件中的数据互补干扰
                    (3).组件的模板结构 要配置在template属性中 值为html字符串
                        3.1 而且要用模板字符串
                        32. 模板结构必须只有一个根标签()
                4.所有的组件定义后,必须注册.分为全局注册和局部注册
                
                5.Vue.extend调用的返回值是VueComponent构造函数.
                6.VueComponent继承了Vue
                继承的本质是 子类的原型对象是父类的实例.

                
        */
        const School = Vue.extend({
            data(){
               return {
                   name: '银河日语',
                   address: '宏福科技'
               } 
            },
            template: `
                <div>
                    <h2>学校名: {{name}}</h2>
                    <h2>学校地址: {{address}}</h2>
                </div>
            `

        })
        console.log(typeof School);

        //2.注册School组件.--全局注册 Vue.component('组件名', 组件)
        // Vue.component('School', School)

        //2.2局部注册是在Vue({})的components里面定义


        //3.定义一个vm 去管理所有的组件
        const vm = new Vue({
            el: '#root',
            //局部注册组件
            components: {
                School
            }
        })
    </script>
</body>
</html>